RootScope and Scope

We have Parent Scope i.e. RootScope for all the Scope in a Web Page.

$rootscope and $scope are the angular object.

RootScope:

•     $rootscope is created with ng-app directive, which tells Angular JS i.e. this is a root element of the application.  
•     We can define the variable in client script as $rootScope.VARIABLE_NAME="Test";    
•     We can acces the rootScope variable in HTML as {{$root.VARIABLE_NAME}} 

Scope:

•     $scope is created with ng-controller directive.
•     We can define the variable in client script as $cope.VARIABLE_NAME="Test";
•     We can acces the rootScope variable in HTML as {{VARIABLE_NAME}} 

    

Every page in service portal is considered as a angular js application.

Every page has a $rootscope object and which is parent of every widget's $scope object.

    

Example:

HTML:

<div>

<!-- your widget template -->

  <div>

  <h2>Widget 1<h2>

  </div>

    <input type="text" ng-model="c.fname"/>

  <button type="button" ng-click="c.test()">

  Click to send  

  </button>

   <h4>Message From Widget 2: {{c.data.abc}}</h4>

     <br>

    <div>ttt{{$root.fan}}</div>

      <br>

  <br>

    <div> tt Scope {{xyz}}</div>

</div>

Client Script:

function($rootScope,$scope) {

  /* widget controller */

  var c = this;

    $rootScope.fan="Cycle";

    c.test = function(){

     $scope.xyz="Random1";    

    }

};